<template>
  <div>
    <template>
      <el-menu-item
        v-if="!editing"
        :index="menuItem.id"
        class="chat-menu"
        @click="clickMenu"
      >
        <div class="menu-input">
          <i class="el-icon-chat-line-square"></i>
          <el-popover
            placement="bottom"
            width="100"
            trigger="hover"
            :open-delay="900"
            :content="menuItem.chatMenuName"
          >
            <span slot="reference" class="menu-input-span">
              {{ menuItem.chatMenuName }}
            </span>
          </el-popover>
        </div>
        <div class="menu-icon">
          <i @click="startEditing" class="el-icon-edit-outline"></i>
          <i @click.stop="del" class="el-icon-delete"></i>
        </div>
      </el-menu-item>
      <el-menu-item
        v-else
        :index="menuItem.id"
        :key="menuItem.id"
        class="chat-menu"
      >
        <div class="menu-input">
          <i class="el-icon-chat-line-square"></i>
          <el-input ref="input" v-model="inputValue" />
        </div>
        <div class="menu-icon">
          <i @click="saveEditing" class="el-icon-check"></i>
          <i @click="closeEditing" class="el-icon-close"></i>
        </div>
      </el-menu-item>
    </template>
  </div>
</template>
<script>
import { delChatMenu, updChatMenu } from "@/services/chat";
export default {
  name: "chatMenuItem",
  props: ["menuItem"],
  data() {
    return {
      inputValue: "",
      editing: false,
    };
  },
  methods: {
    startEditing() {
      this.editing = true;
      this.inputValue = this.menuItem.chatMenuName;
      this.$nextTick(() => {
        this.$refs.input.focus();
      });
    },
    closeEditing() {
      this.editing = false;
    },
    saveEditing() {
      this.editing = false;
      this.menuItem.chatMenuName = this.inputValue;
      updChatMenu(this.menuItem)
        .then((res) => {})
        .catch((error) => {});
    },
    del() {
      delChatMenu(this.menuItem.id)
        .then((res) => {
          this.$emit("menu-item-updated", res.data);
        })
        .catch((error) => {});
    },
    clickMenu() {
      this.$emit("menu-item-click", this.menuItem);
    },
  },
};
</script>
  
<style lang="scss" scoped >
.el-icon-delete:hover {
  color: #fd0202;
}
.el-icon-edit-outline:hover {
  color: #fd0202;
}

/deep/.el-input__inner {
  border: none;
}
/*  */
.chat-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .menu-input {
    display: flex;
    overflow: hidden;
    align-items: center;
  }
  .menu-input-span {
    display: flex;
    align-items: center; /* 让图标和文本垂直居中对齐 */
    flex-wrap: nowrap; /* 防止文本折行 */
    overflow: hidden;
    white-space: nowrap; /* 不换行 */
  }
}
/deep/ .el-dropdown-menu__item,
.el-menu-item {
  padding: 0;
}
</style>